<style lang="less">
body{
    color: #333;
    font: 14px/1.5 Arial, "Helvetica Neue", "Microsoft YaHei";
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.app{
    .header,
    .sidebar{
        border-radius: 0;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 7;
    }
    .header{
        width: 100%;

        li{
            float: right;
        }

        em {
            font-style: normal;
        }

        .logo{
            float: left;
            color: #FFF;
            font-size: 1.2em;
        }
    }
    .sidebar{
        width: 200px;
        overflow: auto;
        top: 60px;
        bottom: 0;
    }
    .main{
        margin: 60px 0 0 200px;
        padding: 15px 15px 20px;
    }
    .main-header{
        border-bottom: 1px solid #EEE;
        margin-bottom: 15px;
        padding: 5px 0 10px;
        min-height: 36px;
        position: relative;

        .el-breadcrumb{
            font-size: 1.36em;
            line-height: 1.84;
        }
    }
    .main-menus{
        padding-top: 5px;
        position: absolute;
        right: 0;
        top: 0;
    }
    .main-filters{
        background: #EAEEFB;
        border-radius: 3px;
        margin-bottom: 20px;
        padding: 10px 10px 0;

        .el-form-item{
            margin-bottom: 10px;
        }
        .el-radio-group{
            vertical-align: top;
        }
    }
    .main-actions{
        display: flex;
        margin: 20px 0 10px;
        padding: 10px 0;
        align-items: center;
        justify-content: space-between;
    }
    .main-actions-label{
        em{
            color: #111;
            font-style: normal;
            margin: 0 .5em;
        }
    }
    .item-menus{
        padding: 5px 0 0;

        .el-button,
        .el-button + .el-button{
            margin: 0 8px 5px 0;
        }
    }
    .main-list{
        .cell{
            padding: 10px 18px;
        }

        .props{
            dl{
                line-height: 1.72;
            }
            dd{
                margin: -1.72em 0 .5em 4.2em;
                min-height: 1.72em;
            }

            em{
                display: inline-block;
                font-style: normal;
                margin-right: .5em;
                white-space: nowrap;
            }
        }
    }
    .main-form{
        margin: 40px 10px;
        width: 40%;
        min-width: 480px;
    }
    .preview{
        padding: 10px 0;
        text-align: center;

        img{
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 200px;
            vertical-align: top;
        }
    }
    .designer-avatar-preview {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        padding: 15px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    .el-pagination{
        padding: 20px;
        text-align: right;
    }
    .el-loading-mask{
        z-index: 1;
    }
    .el-form-item{
        // &:last-child{
        //     margin-bottom: 0;
        // }

        .el-input-number{
            vertical-align: top;
        }
    }
    .el-checkbox + .el-checkbox,
    .el-radio + .el-radio{
        margin-left: 0;
    }
    .el-checkbox,
    .el-radio{
        margin-right: 15px;
    }
    .el-dragger{
        .el-dragger__cover{
            z-index: 1;
        }
    }
    .el-dragger__cover{
        img{
            height: auto;
        }
    }
    .main-content {
        div {
            display: inline-block;
            vertical-align: top;
            .grid-content {
                padding: 15px;
                width: 170px;
                height: 200px;
                text-align: center;
                img {
                    max-width: 100%;
                }
            }
            p {
                text-align: center;
                color: #5e7382;
            }
        }
    }
}
</style>
<template>
    <el-row class="app">
        <el-menu class="header" theme="dark" mode="horizontal" menu-trigger="click" :router="true">
            <el-menu-item class="logo" index="logo" :route="{path:'/'}">酒店管理 - 票券系统<em v-if="isDev"></em></el-menu-item>
            <el-submenu index="user" v-if="user">
                <template slot="title">{{user.name}} - {{user.role.name}} - {{user.account}}</template>
                <el-menu-item index="user-info" :route="{path:'/user'}">个人中心</el-menu-item>
                <el-menu-item index="#" @click.native="logout()">注销</el-menu-item>
            </el-submenu>
            <!-- <el-menu-item index="www">前台</el-menu-item> -->
        </el-menu>
         <el-menu class="sidebar" theme="dark" :router="true" :default-active="$route.path">
            <template v-for="menu in menus">
                <el-menu-item v-if="!menu.children && showMenu(menu)" :index="menu.path">{{menu.name}}</el-menu-item>
                <el-submenu v-if="menu.children && showMenu(menu)" :index="menu.path">
                    <template slot="title">{{menu.name}}</template>
                    <template v-for="subMenu in menu.children" v-if="showMenu(subMenu)">
                        <el-menu-item v-if="!subMenu.children && showMenu(subMenu)" :index="subMenu.path">{{subMenu.name}}</el-menu-item>
                         <el-submenu v-if="subMenu.children && showMenu(subMenu)" :index="subMenu.path">
                            <template slot="title">{{subMenu.name}}</template>
                            <el-menu-item v-for="thirdMenu in subMenu.children" v-if="showMenu(thirdMenu)" :index="thirdMenu.path">{{thirdMenu.name}}</el-menu-item>
                         </el-submenu>
                    </template>
                </el-submenu>
            </template>
        </el-menu>

        <router-view></router-view>
    </el-row>
</template>

<script>
import TTXS from '../common/ttxs';
import AttributeTypes from '../models/attribute-type';
import menus from '../data/menus'

export default {
    data() {
        return {
            user: TTXS.user || {role: {menus: []}},
            isDev: location.host.indexOf('dev') > -1,
            menus: menus
        };
    },
    methods: {
        logout() {
            let loading = this.$loading({
                lock: true,
                text: '注销中，请稍后...'
            });

            TTXS.logout()
            .then(() => {
                this.$router.push('/login');
            })
            .finally(() => {
                loading.close();
            });
        },
        showMenu(menu) {
            if(this.user && this.user.role && this.user.role.menus && this.user.role.menus.indexOf(menu.name) > -1) {
                return true;
            };
            if(this.user && this.user.role && this.user.role.menus && menu.children) {
                for(let i = 0; i < menu.children.length; i++) {
                    if(this.user.role.menus.indexOf(menu.children[i].name) > -1) {
                        return true;
                    }
                }
            }
            return false;
        }
    },
    watch: {
        $route() {
            this.user = TTXS.user || {role: {}};
        }
    }
};
</script>
